{extend name="public/base"/} {block name="body"}
<style>
    .mui-row.mui-fullscreen>[class*="mui-col-"] {
        height: 100%;
    }

    .mui-col-xs-3,
    .mui-col-xs-9 {
        overflow-y: auto;
        height: 100%;
    }

    .mui-segmented-control .mui-control-item {
        line-height: 50px;
        width: 100%;
    }

    .mui-control-content {
        display: block;
    }

    .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
        background-color: #fff;
    }
    .mui-toast-container {
        bottom: 50%;
        z-index: 999999999999999999;
    }
    .mui-btn-block{
      padding: 5px;
      border: 1px solid #ccc !important;
      margin: 5px;
      -webkit-appearance: none;
    }
    .active .mui-icon{
      display: block !important;
    }
    .paylist.open{
          overflow-y: scroll;
    }

    .info-box{
      background-color: #3190e8;
      padding: .4rem .4rem;
      color:#fff;
    }
    .info-box .headimg {
      padding: 0.5rem 0;
    }
    .info-box .headimg img{

      font-size: 1.6rem;
      line-height: 1.6rem;
      width: 1.6rem;
      border-radius: 50%;
      height: 1.6rem;
      background: #fff;
      display: inline-block;
      vertical-align: middle;

    }
    .balance{
          color: #f90;
    }
    .hongbao{
          color: #ff5f3e;
    }
    .score{
            color: #6ac20b;
    }
    .mui-row {
      background-color: #fff;
    }
    .mui-row .mui-col-xs-6{
      padding: .453333rem 0 .293333rem;
      font-size: .32rem;
      line-height: .32rem;
      border-right: 1px solid #ddd;
    }

    .mui-row .mui-col-xs-6 span{
       font-size: .693333rem;
       line-height: .693333rem;
       font-weight: 700;
    }
</style>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/xsd/css/checkout.css" />
<header class="mui-bar mui-bar-nav" >
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">充值页面</h1>
</header>
<div class="mui-content" style="    margin-bottom:60px;">
  <div class="info-box mui-text-center">
    <div class="headimg">
      <img src="{$Think.session.user.headimgurl}">
    </div>
    <h4>Hi.{$Think.session.user.nickname}  {notempty name="$Think.session.user.name" }(会员){/notempty}</h4>
  </div>
  <div class="mui-row mui-text-center">
    <div class="mui-col-xs-6">
       <p class="balance"> <span>{$Think.session.user.balance}</span>元 </p>
       <p >我的余额</p>
    </div>
    <div class="mui-col-xs-6" onclick='window.location.href = "{:url('index/coupon/integral')}"'>
      <p class="score"> <span>{$Think.session.user.integral}</span>分 </p>
      <p >我的积分</p>
    </div>
  </div>
<br />
  <div class="mui-card" style="padding:10px;">
    <!-- {empty name="$Think.session.user.name" }      <p class="text-center" style=" text-align: center;padding: 30px;">        注册后才能进行充值      </p>      <a  class="mui-btn mui-btn-success zc" href="{:url('user/info')}" style="width:100%;">注册会员</a>&nbsp;&nbsp;    {else /} -->
    <form class="mui-input-group" method="post"  action="{:url('index/topup/add')}">
    					<div class="mui-input-row">
    						<label>充值卡号</label>
                		<input type="text" name="card" placeholder="请输入充值卡号">
    					</div>
    					<!-- <div class="mui-input-row">
    						<label>绑定的手机号</label>
                {$Think.session.user.phone ? '<div style="line-height: 1.1;    float: left;padding: 11px 0;">'.$Think.session.user.phone.'</div>' : '<input type="number" name="phone" placeholder="请输入绑定的手机号">' }

    					</div> -->


              <div>
                          <input type="hidden" name="offlinepay_status" value="{$xstatus}" />
              						<button type="button" class="mui-btn mui-btn-primary sbt" onclick="return false;" style="width:100%;margin-top:20px;">确认</button>&nbsp;&nbsp;

              					</div>
    			</form>
    <!-- {/empty} -->


  </div>

{include file="public/nav" /}
</div>

<script id="zt" type="text/html">
    {{each  as value i}}
      <div class="paylist-item " data-couponid='{{value.id}}' data-total="{{value.total}}" data-price="{{value.price}}"><span> 满{{value.total}}元减{{value.price}}  </span> <span class="mui-icon mui-icon-checkmarkempty" style="color:#007aff;border: 1px solid;display:none"></span></div>

    {{/each}}
</script>
{/block}
{block name="script"}
<script type="text/javascript">
  $(function(){
    $("input[name='total']").keyup(function(){
      var val = $(this).val()
      $('.price').text(val)
      $('[name="coupon_id"]').val(0)
      $('#paywaytext').text(' ')
    })




    $('#payment').on('tap', function(){
        $('.paylist').addClass('open');
        $('.paylist').next().addClass('open');
    })
    $('.mask').on('tap', function(){
      $(this).removeClass('open')
      $('.paylist').removeClass('open')
    })



    //确定付款
    $('.sbt').on('tap', function(){
      var card = $.trim($('[name="card"]').val())
      var phone = $.trim($('[name="phone"]').val())
      console.log($('[name="phone"]').length);
      if(!card){
        mui.toast('请输入充值卡号！')
        return;
      }
      // if($('[name="phone"]').length == 1){
      //   if (!phone) {
      //        mui.toast("请输入手机号码！");
      //        return;
      //    } else if (!/^0?1[3|4|5|8]\d{9}$/.test(phone)) {
      //        mui.toast("你输入的手机号码不正确！");
      //        return;
      //    }
      // }
      $.post("{:url('index/topup/add')}", {
          "card": card
      }, function(data) {
        mui.toast(data.msg)
        if(data.code == 1){
          setTimeout(function() {
              location.reload()
          }, 2000);
        }
        if(data.code == 3){
          $(".zc").show()
        }


      }, "json");
    })


  })
</script>
{/block}
